<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>

    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="../bootstrap/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="../bootstrap/localization/en.js"></script>


    <script>
        $(function () {
            //给"全选"按钮添加单击事件
            $("#check-all").click(function () {
                $("tbody tr td input").prop("checked", this.checked);
            });
            $("tbody").on("click", "tr td input", function () {
                //如果列表中的所有checkbox都选中，则"全选"按钮也选中
                if ($("tr td input").size() == $("tr td input:checked").size()) {
                    $("#check-all").prop("checked", true);
                } else {//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                    $("#check-all").prop("checked", false);
                }
            });

            // 给"添加"按钮添加单击事件
            $("#add-btn").click(function () {
                window.location.href = "/backstage/article/add";
            });
            // 给"删除"按钮添加单击事件
            $("#del-btn").click(function () {

            });
            // 给"修改"按钮添加单击事件
            $("#edit-btn").click(function () {

            });
            // 给"置顶"按钮添加单击事件
            $("#sticky-btn").click(function () {

            });
            // 给"发表"按钮添加单击事件
            $("#sticky-btn").click(function () {

            });
            // 给"下架"按钮添加单击事件
            $("#sticky-btn").click(function () {

            });
            // 给"搜索"按钮添加单击事件
            $("#select-btn").click(function () {

            });

            $("#paginate").bs_pagination({
                currentPage: 1,//当前页号,相当于pageNo

                rowsPerPage: 10,//每页显示条数,相当于pageSize
                totalRows: 1000,//总条数
                totalPages: 100,  //总页数,必填参数.

                visiblePageLinks: 5,//最多可以显示的卡片数

                showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                showRowsInfo: true,//是否显示记录的信息，默认true--显示

                //用户每次切换页号，都自动触发本函数;
                //每次返回切换页号之后的pageNo和pageSize
                onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                    //js代码
                    // alert(pageObj.currentPage);
                    // alert(pageObj.rowsPerPage);
                }
            });
        });
    </script>
</head>
<body>
<div>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 文章列表</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <button id="add-btn" class="button border-main icon-plus-square-o"> 添加</button>
                    <button id="del-btn" class="button border-red icon-trash-o"> 删除</button>
                    <button id="ed it-btn" class="button border-yellow icon-edit"> 修改</button>
                    <button id="sticky-btn" class="button border-middle icon-angle-up"> 置顶</button>
                    <button id="-btn" class="button border-middle icon-arrow-up"> 发表</button>
                    <button id="s-btn" class="button border-middle icon-arrow-down"> 下架</button>
                </li>
                <li>搜索：</li>
                <li>
                    <select class="input">
                        <option value="">状态</option>
                        <option value="">启用</option>
                        <option value="">禁用</option>
                    </select>
                </li>
                <li>
                    <select id="column" class="input">
                        <option value="">请选择栏目</option>
                        <option value="1">栏目1</option>
                        <option value="2">栏目2</option>
                    </select>
                </li>
                <li>
                    <input type="text" placeholder="请输入搜索关键字" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    <button id="select-btn" class="button border-main icon-search"> 搜索</button>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th title="全选"><input type="checkbox" id="check-all"/></th>
                <th>编辑</th>
                <th>栏目</th>
                <th>标题</th>
                <th>内容</th>
                <th>发表时间</th>
                <th>状态</th>
            </tr>
            </thead>

            <tbody>
            <tr>
                <td><input type="checkbox" value="id"></td>
                <td>编辑1</td>
                <td>栏目1</td>
                <td>标题1</td>
                <td>内容1</td>
                <td>2022-11-22</td>
                <td><font color="#00CC99">已发布</font></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="id"></td>
                <td>编辑2</td>
                <td>栏目2</td>
                <td>标题2</td>
                <td>内容2</td>
                <td>2022-11-22</td>
                <td><font color="#ff0000">未发布</font></td>
            </tr>
            </tbody>

        </table>
        <div id="paginate"></div>
    </div>
</div>
</body>
</html>